<template>
<div class="body">
  <el-row :gutter="24" class="box-card">
   <el-col :span="1">
     <Navigation></Navigation>
   </el-col>
   <el-col :span="10" :offset="1">
     <el-card>
       <div slot="header">
         <span>支出</span>
         <DatePicker class="right" size="mini" type="success" @returnDate="getPayoutDate"></DatePicker>
       </div>
       <div >
<!--         传入props数据-->
          <Pie_Echart :pie_data="payoutCard_data" title="支出玫瑰图"></Pie_Echart>
       </div>
     </el-card>
   </el-col>
   <el-col :span="10" >
     <el-card>
       <div slot="header">
         <span>收入</span>
         <DatePicker class="right" size="mini" type="success" @returnDate="getIncomeDate"></DatePicker>
       </div>
       <div >
<!--         传入props数据-->
          <Pie_Echart :pie_data="incomeCard_data" title="收入玫瑰图"></Pie_Echart>
       </div>
     </el-card>
   </el-col>
  </el-row>
<!--  条形图部分-->
  <el-row :gutter="24" class="box-card">
   <el-col :span="20" :offset="2">
     <el-card>
       <div>
       <el-tabs v-model="activeName" class="tabs">
         <el-tab-pane label="支出" name="payout">
         </el-tab-pane>
         <el-tab-pane label="收入" name="income">
         </el-tab-pane>
       </el-tabs>
       <DatePicker class="right" size="mini" type="warning" @returnDate="barDate"></DatePicker>
       </div>
     <div>
       <Bar_Echart :activeName="activeName" :payoutData="barPayout_data" :incomeData="barIncome_data" ></Bar_Echart>
     </div>
     </el-card>
   </el-col>
  </el-row>
  <Footer></Footer>
</div>
</template>

<script>
import Bar_Echart from './bar_echart/index'
import Pie_Echart from './pie_echart/index'
import DatePicker from '@/components/DatePicker/index'
import Footer from '@/components/Footer/index'
import dayjs from 'dayjs'
import {getToken} from "@/plugins/token";
import {getUserInfo} from "@/api/user";
import {getIncomeBarData, getIncomeCardDate, getPayoutBarData, getPayoutCardDate} from "@/api/home";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  components: {
    Pie_Echart,
    DatePicker,
    Bar_Echart,
    Footer,
    },
  data(){
    return {
      activeName:'payout',
      user:{},
      userInfo:{},

      incomeDate:[],
      incomeCard_data:{},

      payoutDate:[],
      payoutCard_data:{},

      barCardDate:[],
      barPayout_data:[],
      barIncome_data:[],
      barData:{}
    }
  },
  async mounted(){
    // this.user=this.$store.state.user.user;
    //获取用户信息
    this.token=getToken();
    this.userInfo=await getUserInfo(this.token);
    await this.initCardData();
  },
  methods:{
    //初始化incomeCard data
    async initCardData(){
      //初始化时，时间默认为**--当前时间
      this.incomeDate[0]=dayjs('0000-00-00 00:00:00').hour(0).minute(0).second(0).millisecond(0).format("YYYY-MM-DD HH:mm:ss");
      this.incomeDate[1]=dayjs().format("YYYY-MM-DD HH:mm:ss");
      //发送请求，获取金额、收入类型
      const result=await getIncomeCardDate(this.incomeDate[0],this.incomeDate[1],this.userInfo.id);
      //发送请求，获取金额、支出类型
      const result1=await getPayoutCardDate(this.incomeDate[0],this.incomeDate[1],this.userInfo.id)
      //发送请求，获取金额、支出时间
      const result2=await getPayoutBarData(this.incomeDate[0],this.incomeDate[1],this.userInfo.id)
      //发送请求，获取金额、收入时间
      const result3=await getIncomeBarData(this.incomeDate[0],this.incomeDate[1],this.userInfo.id)


      const dataIncome=[];
      const dataPayout=[];

      result.forEach((item)=>{
        let newobj={};
        newobj['value']=item[0];
        newobj['name']=item[1];
        dataIncome.push(newobj);
      })
      result1.forEach((item)=>{
        let newobj={};
        newobj['value']=item[0];
        newobj['name']=item[1];
        dataPayout.push(newobj);
      })

      this.barPayout_data=[];
      let arr1=[];
      let arr2=[];
      result2.forEach((item)=>{
        arr1.push(item[0]);
        arr2.push(item[1]);
      })
      this.barPayout_data.push(arr1);
      this.barPayout_data.push(arr2);
      //this.barData['barPayout_data']=this.barPayout_data;

      this.barIncome_data=[]
      arr1=[];
      arr2=[];
      result3.forEach((item)=>{
        arr1.push(item[0]);
        arr2.push(item[1]);
      })
      this.barIncome_data.push(arr1);
      this.barIncome_data.push(arr2);
      // this.barData['barIncome_data']=barIncome_data;

      this.incomeCard_data=dataIncome;
      this.payoutCard_data=dataPayout;
    },

    async getIncomeCardData(){
      this.incomeDate[0]=dayjs(this.incomeDate[0]).format("YYYY-MM-DD HH:mm:ss");
      this.incomeDate[1]=dayjs(this.incomeDate[1]).format("YYYY-MM-DD HH:mm:ss");
      //发送请求，获取金额、支出类型
      const result=await getIncomeCardDate(this.incomeDate[0],this.incomeDate[1],this.userInfo.id);
      const data=[];
      result.forEach((item)=>{
        let newobj={};
        newobj['value']=item[0];
        newobj['name']=item[1];
        data.push(newobj);
      })
      this.incomeCard_data=data;
    },
    //获取收入card的日期时间
    getIncomeDate(date){
      this.incomeDate=date;
      this.getIncomeCardData();
    },

    async getPayoutCardData(){
      this.payoutDate[0]=dayjs(this.payoutDate[0]).format("YYYY-MM-DD HH:mm:ss");
      this.payoutDate[1]=dayjs(this.payoutDate[1]).format("YYYY-MM-DD HH:mm:ss");
      //发送请求，获取金额、支出类型
      const result=await getPayoutCardDate(this.payoutDate[0],this.payoutDate[1],this.userInfo.id);
      const data=[];
      result.forEach((item)=>{
        let newobj={};
        newobj['value']=item[0];
        newobj['name']=item[1];
        data.push(newobj);
      })
      this.payoutCard_data=data;
    },
    //获取支出card的日期时间
    getPayoutDate(date){
      this.payoutDate=date;
      this.getPayoutCardData();
    },
    //获取条形图card的日期时间
    barDate(date){
      this.barCardDate=date;
      this.getBarCardData()
    },
    //按时间获取条形图card的数据
    async getBarCardData(){
      this.barCardDate[0]=dayjs(this.barCardDate[0]).format("YYYY-MM-DD HH:mm:ss");
      this.barCardDate[1]=dayjs(this.barCardDate[1]).format("YYYY-MM-DD HH:mm:ss");
      //发送请求，获取金额、支出时间
      const result1=await getPayoutBarData(this.barCardDate[0],this.barCardDate[1],this.userInfo.id);
      //发送请求，获取金额、收入时间
      const result2=await getIncomeBarData(this.barCardDate[0],this.barCardDate[1],this.userInfo.id);

      this.barPayout_data=[];
      let arr1=[];
      let arr2=[];
      result1.forEach((item)=>{
        arr1.push(item[0]);
        arr2.push(item[1]);
      })
      this.barPayout_data.push(arr1);
      this.barPayout_data.push(arr2);
      // this.barData['barPayout_data']=barPayout_data;

      //清空数据
      this.barIncome_data=[];
      arr1=[];
      arr2=[];
      result2.forEach((item)=>{
        arr1.push(item[0]);
        arr2.push(item[1]);
      })
      this.barIncome_data.push(arr1);
      this.barIncome_data.push(arr2);
      // this.barData['barIncome_data']=barIncome_data;
    }
  },
  computed:{
    /*...mapState({
      time2:(state)=>{
        return state.user.user.name;
      }
    }),*/
  }
}
</script>

<style scoped="scoped">
/*
网页的最佳缩放为 100%
*/
.body{
  background-color: #42b983;
  width:100%;
  height:100%;
}
.box-card{
  padding-top: 1%;
}
.right{
  position: relative;
  display:flex;
  justify-content:end;
}
</style>